<template>
  <div class="custom_card_frame animate__animated animate__fadeInUp">
    <div class="custom_card_frame_panel">
      <img :src="item.image" v-lazy="item.image" v-if="item.image" />
      <h1 class="custom_card_frame_panel_header" v-if="item.title">
        <div class="custom_card_frame_panel_header_title">{{ item.title }}</div>
        <div class="custom_card_frame_panel_header_slogan">
          {{ item.slogan }}
        </div>
        <div><slot name="right"></slot></div>
      </h1>
      <div class="custom_card_frame_content">
        <slot name="cardFrameContent" :item="item"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "cardframe",
  props: {
    item: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style lang="less">
@base: 23.44rem;
.custom_card_frame {
  padding: (2.5 / @base) 0;
  .custom_card_frame_panel {
    box-shadow: 0 2px 12px rgba(100, 101, 102, 0.12);
    border-radius: (5 / @base);
    background-color: #fff;
    margin: (5 / @base);
    overflow: hidden;
    text-align: left;
    h1 {
      &.custom_card_frame_panel_header {
        font-size: (14 / @base);
        line-height: (14 / @base);
        text-align: left;
        padding: (10 / @base) (10 / @base);
        border-bottom: (1 / @base) solid #efefef;
        background-color: #fff;
        display: flex;
        height: (15 / @base);
        overflow: hidden;
        margin: (5 / @base) 0;
        color: #333;
        font-weight: 400;
        div {
          width: 10%;
          &.custom_card_frame_panel_header_title {
            width: 25%;
            line-height: (14 / @base);
            overflow: hidden;
          }
          &.custom_card_frame_panel_header_slogan {
            width: 65%;
            font-size: (12 / @base);
            line-height: (14 / @base);
            color: #ccc;
            margin: 0 0 0 (10 / @base);
            font-weight: 400;
          }
        }
      }
    }
    img {
      width: 100%;
      height: (137 / @base);
      background-color: #999;
    }
    .custom_card_frame_content {
      padding: 0;
      font-size: (14 / @base);
      min-height: (60 / @base);
    }
  }
}
@keyframes fadeInUp {
  0% {
    transform: translate3d(0, 10%, 0);
  }
}
</style>
